<template>
    <div class="pannel">
        <div class="name">名称：{{ data.name }} , ID:{{data.id}}</div>
        <div class="item">
            <TileItem :data="data" />
        </div>
        <div class="move block">
            <div>
                海 :
                <span class="blue">{{ data.ocean }}</span>
            </div>
            <div>
                陆 :
                <span class="green">{{ data.land }}</span>
            </div>
            <div>
                空 :
                <span class="sky">{{ data.air }}</span>
            </div>
        </div>
    </div>
</template>
<script>
import { toRefs } from '@vue/reactivity'
import TileItem from './TileItem.vue'
export default {
    components: { TileItem },
    // emits:[],
    props: ['data'],
    setup(props, context) {
        const state = props
        // console.log(state)
        return {
            ...toRefs(state)
        }
    },
}
</script>
<style lang="less" scoped>
.pannel {
    text-align: center;
    .name,.item,.move {
        padding: 5px;
    }
    .blue {
        color: blueviolet;
    }
    .green {
        color: #080;
    }
    .sky {
        color: skyblue;
    }
}
</style>